<template>
  <div class="beijing">
    <el-container>
      <el-header>个人中心</el-header>
      <el-container>
        <el-aside width="300px">
          <el-col :span="12">
            <div class="sub-title"></div>
            <div class="demo-basic--circle">
              <div class="img">
                <el-avatar
                  :size="100"
                  :src="circleUrl"
                  align="center"
                ></el-avatar>
              </div>
              <div class="block">
                <span></span>
              </div>
            </div>
          </el-col>
          <div class="weiz">
            <el-button type="text">我的交易</el-button><br/>
            <el-button type="text">我的购物车</el-button><br/>
            <el-button type="text">我的订单</el-button><br/>
            <el-button type="text">评价晒单</el-button><br/>
            <el-button type="text">个人中心</el-button><br/>
            <el-button type="text">我的中心</el-button><br/>
            <el-button type="text">地址管理</el-button><br/>
            <el-button type="text">账号管理</el-button><br/>
            <el-button type="text"  @click="chargeshow" >个人信息</el-button><br/>
<!--            @click="loginDemo"-->
            <el-button type="text">修改密码</el-button>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <el-card class="box-card">
              <div slot="header" v-show ="show" class="clearfix">
                <span style="float: left"><b>基础资料</b></span>
                <el-button-group style="float: right; padding: 3px 0" type="text">
                  <el-button type="primary" icon="el-icon-edit" size="medium" round @click="dialogFormVisible = true">
                    修改信息
                  </el-button>
                  <el-button type="primary" icon="el-icon-check" size="medium" round>
                    确认修改
                  </el-button>
<!--                  // 弹窗修改个人信息-->
                  <el-dialog title="编辑基础资料" :visible.sync="dialogFormVisible">
                    <el-form :model="form" label-width="50px">
                      <el-form-item label="姓名" :visible.sync="dialogFormVisible">
                        <el-input v-model="form.region" placeholder="请输入姓名">
                        </el-input>
                      </el-form-item>
                      <el-form-item label="生日" :visible.sync="dialogFormVisible">
                        <el-col :span="11">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-radio-group v-model="form.resource">
                          <el-radio label="男"></el-radio>
                          <el-radio label="女"></el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                  </el-dialog>
                </el-button-group>
                <br />
                <br />
                <el-input  placeholder="姓名"></el-input>
<!--                <el-divider></el-divider>-->
                <br />
                <br />
                <el-input  placeholder="生日"></el-input>
<!--                <el-divider></el-divider>-->
                <br />
                <br />
                <el-input  placeholder="性别"></el-input>
                <br />
                <br />
                <span style="float: left" shadow="hover"><b>高级设置</b></span>
                <br />
                <br />
                <el-input  placeholder="账号地区"></el-input>
              </div>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'user',
  data () {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      show: false,
      show1: true,
      circleUrl: '../src/assets/logo.png',
      sizeList: ['large']
    }
  },
  methods: {
    // dialogFormVisible (e) {
    //   this.show1 = !this.show1
    // },
    chargeshow (a) {
      this.show = !this.show
    }
    // handleEdit (index, row) {
    //   console.log(index, row)
    // },
    // handleDelete (index, row) {
    //   console.log(index, row)
    // }
  }
}
</script>
<style>
  .weiz {
    margin-top: 170px;
    /*透明度设置R，G，B，透明的*/
    background-color:rgba(0,0,0,0.1);
  }
  .demo-basic--circle {
    align: 'center';
    margin-top: 30px;
    margin-left: 100px;
  }
  .block {
    margin-left: 25px;
    font-weight: bold;
  }
  .clearfix{
    margin-top: 50px;
  }

  .beijing{
    background-size: 100% 100%;
    background: url('../../static/lmg/2.jpg') center center repeat;
    height: 100%;
    position: fixed;
    width: 100%
  }
</style>
